<template>
  <Form class="zl-editor-attr" label-position="top" >
    <FormItem label="第一步：选择数据源">
      <Select v-model="formProperty.source" clearable filterable @on-change="queryColumns">
        <Option v-for="(datasource, dsIndex) in datasourceList" :key="dsIndex"
          :value="datasource.datasourceId"  >{{datasource.datasourceName}}</Option>
      </Select>
    </FormItem>
    <FormItem label="第二步：拖拽字段至工作区">
      <ul class="tablefield">
        <li v-for="(item,index) in tableFieldList" :key="index"
          draggable="true"
          @dragstart="moveStart(item,$event)"
          @dragend="moveEnd(item,$event)">
          <i class="fa active-color"
            :class="{'zlstbd-icon-text':item.dataType ==('string'),'zlstbd-icon-numerical-value'
            :dataType.int.indexOf(item.dataType)!=-1,'zlstbd-icon-date'
            :dataType.data.indexOf(item.dataType)!=-1}">
          </i>
          {{item.columnType}} {{item.columnName}}
        </li>
        <div v-if="tableFieldList.length == 0 " class="title p-t-30 text-center">请选择数据源</div>
      </ul>
    </FormItem>
  </Form>
</template>
<script type="text/javascript">
import getData from 'getData'
import emitter from '@/mixins/emitter';

export default {
  name: 'PanelData',
  data () {
    return {
      datasourceList: [],
      tableFieldList: [],
      datasource:{
        datasourceId:'',
        tableName:'',
        datasourceType:'',
        projectId:''
      },
      dataType:{
        int:'int,float,double',
        data:'date,timestamp'
      }
    }
  },
  props: {
    formProperty: {
      type: Object,
      default () {
        return {}
      }
    },
    setting: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  mounted () {
    this.getDataSource()
  },
  methods: {
    getDataSource() {
    	getData.get('queryDatasource').then((res) => {
        if (res.status == 200 && res.data.code == '000') {
          this.datasourceList = res.data.data;
        }
      })
    },
    queryColumns(value) {
      for (let i = 0; i < this.datasourceList.length; i++) {
        const source = this.datasourceList[i];
        if (source.datasourceId === value) {
          this.datasource = source
          break
        }
      }

      if (this.datasource.datasourceId != '') {
        getData.get('queryDatasourceColumns', {},this.datasource.datasourceId).then((res) => {
          if (res.status == 200 && res.data.code == '000') {
            this.tableFieldList =res.data.data;
          }
        })
      }
    },
    moveStart(item,ev){
      emitter.methods.dispatch('MainBoard', 'widget-data-start', item, this)
    },
    moveEnd(){
      emitter.methods.dispatch('MainBoard', 'widget-data-start', {}, this)
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.zl-editor-attr {
  padding: 0 8px;
}
</style>
